<template>
  <div class="sortingOrder">
    <div class="sortTitle">装箱单(单品)</div>
    <div id="printMe">
      <div class="el-table">
        <el-table :data="header" border style="width:100%">
          <el-table-column prop="goods" label="商品名称" width="atuo"></el-table-column>
          <el-table-column prop="goodsSpecification" label="商品规格" width="atuo"></el-table-column>
          <el-table-column prop="rfidNum" label="rfid数量" width="atuo"></el-table-column>
          <el-table-column prop="groupNum" label="团购数量" width="atuo"></el-table-column>
          <el-table-column prop="predictTotal" label="计划数量" width="atuo"></el-table-column>
          <el-table-column prop="actualTotal" label="实际数量" width="atuo"></el-table-column>
        </el-table>
      </div>
      </div>
           <div class="information">
        <el-button type="primary" @click="avager" >平均分配</el-button>
        <el-button type="primary" @click="handlePacking" >一键传标</el-button>
        <el-button type="primary" @click="handleAll">全部完成</el-button>
      </div>
      <!-- <el-button type="primary"  v-print="'#printMe'" style="margin: 10px 25px;" >打印</el-button> -->
      <div class="table-light">
        <el-table :data="packBody" border style="width: 100%;">
          <el-table-column type="index" label="序号" width="100"></el-table-column>
          <el-table-column prop="place" label="场地名称" width="auto"></el-table-column>
          <el-table-column prop="path" label="配送路线" width="auto"></el-table-column>
          <el-table-column prop="rfidNum" label="RFID柜商品数量" width="auto"></el-table-column>
          <el-table-column prop="groupNum" label="团购柜商品数量" width="auto"></el-table-column>
          <el-table-column fixed="right" label="操作" width="auto">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleDelect(scope.row,scope.$index)">删除</el-button>
              <el-button type="text" size="small" @click="handleEdit(scope.row,scope.$index)">修改</el-button>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="状态">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                v-if="scope.row.status==0"
                @click="handleFinally(scope.row,scope.$index)"
              >未完成</el-button>
              <el-button type="text" size="small" v-if="scope.row.status==1">已完成</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="packingForm">
        <el-form-item label="Rfid数量" :label-width="formLabelWidth">
          <el-input v-model="packingForm.rfidNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="场地路线" :label-width="formLabelWidth">
          <el-input v-model="packingForm.courseSite" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// // 导入的其他文件 例如：import moduleName from 'modulePath';
import {
  sortpack,
  sortpackDelect,
  insert,
  xlsPlace,
  device,
  avager,
  putStorage,
  specification,
  oneFinally,
  allFinally,
  sortpackEdit
} from "@/api/user";
export default {
  //import所引入的组件注册
  components: {},

  data() {
    return {
      packHead: [],
      packBody: [],
      header: [],
      pathList: [],
      value: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "100px",
      ischeck: false,
      packingForm: {
        rfidNum: "",
        sortInfoId: "",
        courseSite: ""
      }
    };
  },

  //监听属性
  computed: {},

  //监控data中的数据变化
  watch: {},

  //方法集合
  methods: {
    //全部完成
    handleAll() {
      allFinally(this.$route.query.id).then(res => {
        if (res.code == 20000) {
          this.ischeck = true;
          this.sortpack();
          this.$message({
            message: res.msg,
            type: "success"
          });
        } else {
          this.$message({
            message: res.msg,
            type: "success"
          });
        }
      });
    },
    //当个完成
    handleFinally(row) {
      console.log(row);
      oneFinally(row.id).then(res => {
        console.log(res);
        if (res.code == 20000) {
          this.ischeck = true;
          this.sortpack();
          this.$message({
            message: res.msg,
            type: "success"
          });
        } else {
          this.$message({
            message: res.msg,
            type: "success"
          });
        }
      });
    },
    //平均分配
    avager() {
      let id = this.$route.query.id;
      avager(id).then(res => {
        console.log(res);
        if (res.code == 20000) {
          this.ischeck = true;
          this.sortpack();
          this.$message({
            message: res.msg,
            type: "success"
          });
        } else {
          this.$message({
            message: res.msg,
            type: "warning"
          });
        }
      });
    },
    //装箱
    handlePacking() {
      let data = this.$route.query.id;
      putStorage(data).then(res => {
        console.log(res);
        if (res.code == 20000) {
          this.$message({
            message: res.msg,
            type: "success"
          });
        } else {
          this.$message({
            message: res.msg,
            type: "warning"
          });
        }
      });
    },
    sortpack() {
      let id = this.$route.query.id;
      sortpack(id).then(res => {
        console.log(res);
        this.packBody = res.data.sortPackDetailBodyResqList;
        this.packHead = res.data.sortPlanDetailBodyResq;
        let header = this.header;
        if (this.ischeck == true) {
          return;
        } else {
          header.push(this.packHead);
        }
      });
    },
    //编辑数量
    handleEdit(row) {
      this.dialogFormVisible = true;
      this.packingForm.rfidNum = row.rfidNum;
      this.packingForm.sortInfoId = row.sortInfoId;
      this.packingForm.id = row.id;
      if (row.path != null) {
        this.packingForm.courseSite = `${row.place} ${"/"} ${row.path}`;
      } else {
        this.packingForm.courseSite = `${row.place}`;
      }
    },
    determine() {
      let data = {
        sortInfoId: this.packingForm.sortInfoId,
        rfidNum: this.packingForm.rfidNum,
        id: this.packingForm.id
      };
      sortpackEdit(data).then(res => {
        this.dialogFormVisible = false;
        this.ischeck = true;
        if (res.code == 20000) {
          this.$message({ type: "success", message: res.msg });
          this.sortpack();
        } else {
          this.$message({ type: "working", message: res.msg });
        }
        console.log(res);
      });
    },
    //删除
    handleDelect(row, $index) {
      let id = row.id;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          sortpackDelect(row.id).then(res => {
            this.packBody.splice($index, 1);
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    pathLists() {
      xlsPlace().then(res => {
        this.pathList = res.rows;
      });
    }
  },

  //生命周期 - 组件实例刚被创建
  beforeCreate() {},
  //创建完成 访问当前this实例
  created() {
    this.id = this.$route.query.id;
  },
  //挂载之前
  beforeMount() {},
  //挂载完成 访问DOM元素
  mounted() {
    this.sortpack();
    this.pathLists();
  },
  //更新之前
  beforeUpdate() {},
  //更新之后
  updated() {},
  //for keep-alive 缓存功能，组件被激活时调用
  activated() {},
  //for keep-alive 组件被移除时调用
  deactivated() {},
  //组件销毁之前调用
  beforeDestroy() {},
  //组件销毁之后调用
  destroyed() {}
};
</script>
<style lang='scss' scoped>
.sortTitle {
  margin: 20px;
}
.el-table {
  margin: 0 auto;
  display: block;
  width: 95%;
}
.information {
  padding: 20px 35px;
  font-size: 12px;
}
.table-light {
  padding: 35px;
}
</style>